<template>
	<div class="container">
		<div class="tab-container">
			<div class="tab-item" :class="{ active: activeTab === 'activity' }" @click="switchTab('activity')">
				活动
				<div class="underline" v-if="activeTab === 'activity'"></div>
			</div>
			<div class="tab-item" :class="{ active: activeTab === 'product' }" @click="switchTab('product')">
				商品
				<div class="underline" v-if="activeTab === 'product'"></div>
			</div>
		</div>

		<!-- 活动内容区域 -->
		<div class="content" v-if="activeTab=='activity'">
			<div class="content-card" v-for="(item, index) in activityList" :key="index">
				<div class="card-text">
					<div class="card-title">{{ item.activity_title }}</div>
					<div class="card-date">收藏于：{{ item.created_at }}</div>
				</div>
				<div class="card-icon" @click="nonescs(item)">
					<img src="https://shalong.taiyanyue.top/images/antFill-star1.png" alt="收藏图标" />
				</div>
			</div>
			<uni-load-more :status="activityLoadStatus" />
		</div>

		<!-- 商品内容区域 -->
		<div class="content" v-if="activeTab=='product'">
			<div class="content-card" v-for="(item, index) in productList" :key="index">
				<div class="card-text">
					<div class="card-title">{{ item.goods_name }}</div>
					<div class="card-date">收藏于：{{ item.updated_at }}</div>
				</div>
				<div class="card-icon" @click="nonesc(item)">
					<img src="https://shalong.taiyanyue.top/images/antFill-star1.png" alt="收藏图标" />
				</div>
			</div>
			<uni-load-more :status="productLoadStatus" />
		</div>
	</div>
</template>

<script>
	import {
		goods_getGoodsCollectList,
		goods_goodsCollectSave,
		activity_getUserCollectActivityList,
		activity_activityCollectSave
	} from '@/api/system/user.js'
	
	export default {
		data() {
			return {
				activeTab: 'activity', // 默认选中"活动"
				
				// 活动相关数据
				activityList: [],
				activityPage: 1,
				activitySize: 10,
				activityTotal: 0,
				activityLoadStatus: 'more', // more/loading/noMore
				
				// 商品相关数据
				productList: [],
				productPage: 1,
				productSize: 10,
				productTotal: 0,
				productLoadStatus: 'more',
				
				// 防止重复加载
				isLoading: false
			}
		},
		onLoad() {
			this.loadActivityData();
		},
		onReachBottom() {
			// 滚动到底部加载更多
			if (this.activeTab === 'activity') {
				this.loadMoreActivity();
			} else {
				this.loadMoreProduct();
			}
		},
		onPullDownRefresh() {
			// 下拉刷新
			if (this.activeTab === 'activity') {
				this.refreshActivity();
			} else {
				this.refreshProduct();
			}
		},
		methods: {
			// 切换标签页
			switchTab(tab) {
				if (this.activeTab === tab) return;
				
				this.activeTab = tab;
				// 切换标签时，如果数据为空则加载数据
				if (tab === 'activity' && this.activityList.length === 0) {
					this.loadActivityData();
				} else if (tab === 'product' && this.productList.length === 0) {
					this.loadProductData();
				}
			},
			
			// 加载活动数据
			async loadActivityData() {
				if (this.isLoading) return;
				this.isLoading = true;
				
				try {
					const data = await activity_getUserCollectActivityList({
						page: this.activityPage,
						size: this.activitySize
					});
					
					this.activityList = data.content.data;
					this.activityTotal = data.content.count || 0;
					this.activityLoadStatus = this.activityList.length >= this.activityTotal ? 'noMore' : 'more';
				} catch (error) {
					console.error('加载活动数据失败:', error);
				} finally {
					this.isLoading = false;
					uni.stopPullDownRefresh();
				}
			},
			
			// 加载更多活动
			async loadMoreActivity() {
				if (this.activityLoadStatus !== 'more' || this.isLoading) return;
				
				this.activityLoadStatus = 'loading';
				this.activityPage += 1;
				
				try {
					const data = await activity_getUserCollectActivityList({
						page: this.activityPage,
						size: this.activitySize
					});
					
					this.activityList = [...this.activityList, ...data.content.data];
					this.activityTotal = data.content.count || 0;
					this.activityLoadStatus = this.activityList.length >= this.activityTotal ? 'noMore' : 'more';
				} catch (error) {
					console.error('加载更多活动失败:', error);
					this.activityPage -= 1;
					this.activityLoadStatus = 'more';
				} finally {
					this.isLoading = false;
				}
			},
			
			// 刷新活动数据
			async refreshActivity() {
				this.activityPage = 1;
				await this.loadActivityData();
				uni.stopPullDownRefresh();
			},
			
			// 加载商品数据
			async loadProductData() {
				if (this.isLoading) return;
				this.isLoading = true;
				
				try {
					const data = await goods_getGoodsCollectList({
						page: this.productPage,
						size: this.productSize
					});
					
					this.productList = data.content.data;
					this.productTotal = data.content.count || 0;
					this.productLoadStatus = this.productList.length >= this.productTotal ? 'noMore' : 'more';
				} catch (error) {
					console.error('加载商品数据失败:', error);
				} finally {
					this.isLoading = false;
					uni.stopPullDownRefresh();
				}
			},
			
			// 加载更多商品
			async loadMoreProduct() {
				if (this.productLoadStatus !== 'more' || this.isLoading) return;
				
				this.productLoadStatus = 'loading';
				this.productPage += 1;
				
				try {
					const data = await goods_getGoodsCollectList({
						page: this.productPage,
						size: this.productSize
					});
					
					this.productList = [...this.productList, ...data.content.data];
					this.productTotal = data.content.count || 0;
					this.productLoadStatus = this.productList.length >= this.productTotal ? 'noMore' : 'more';
				} catch (error) {
					console.error('加载更多商品失败:', error);
					this.productPage -= 1;
					this.productLoadStatus = 'more';
				} finally {
					this.isLoading = false;
				}
			},
			
			// 刷新商品数据
			async refreshProduct() {
				this.productPage = 1;
				await this.loadProductData();
				uni.stopPullDownRefresh();
			},
			
			// 取消收藏商品
			nonesc(item) {
				goods_goodsCollectSave({
					goods_id: item.goods_id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '已取消收藏',
							icon: 'none',
							duration: 1500
						});
						// 如果是当前页的第一条且页码大于1，则加载上一页
						if (this.productList.length === 1 && this.productPage > 1) {
							this.productPage -= 1;
						}
						this.loadProductData();
					} else {
						uni.showToast({
							title: '取消收藏失败',
							icon: 'none',
							duration: 1500
						});
					}
				})
			},
			
			// 取消收藏活动
			nonescs(item) {
				activity_activityCollectSave({
					activity_id: item.activity_id
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '已取消收藏',
							icon: 'none',
							duration: 1500
						});
						// 如果是当前页的第一条且页码大于1，则加载上一页
						if (this.activityList.length === 1 && this.activityPage > 1) {
							this.activityPage -= 1;
						}
						this.loadActivityData();
					} else {
						uni.showToast({
							title: '取消收藏失败',
							icon: 'none',
							duration: 1500
						});
					}
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f4f4f4;
		min-height: 100vh;
		padding-top: 10px;
	}

	.tab-container {
		display: flex;
		justify-content: center;
		background-color: #f4f4f4;
		padding: 10px 0;
	}

	.tab-item {
		position: relative;
		font-size: 16px;
		color: #000000;
		margin: 0 40px;
		cursor: pointer;
		padding-bottom: 5px;
	}

	.tab-item.active {
		color: #54a97f;
	}

	.underline {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 2px;
		background-color: #54a97f;
	}

	.content {
		padding: 10px 0;
	}

	.content-card {
		width: 93%;
		margin-left: 12px;
		border-radius: 12px;
		padding: 15px;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.card-text {
		flex: 1;
	}

	.card-title {
		font-size: 16px;
		font-weight: 550;
		margin-bottom: 10px;
	}

	.card-date {
		font-size: 13px;
		color: #b7b7b7;
	}

	.card-icon {
		margin-left: 10px;
	}

	.card-icon img {
		width: 30px;
		height: 30px;
	}
</style>